
<template>
    <el-form-item :label="label" :prop="prop" :rules="rules">
      <el-cascader
        v-model="innerValue"
        v-bind="$attrs"
        :options="options"
        :props="cascaderProps"
        :disabled="disabled"
        :clearable="clearable"
        :show-all-levels="showAllLevels"
        :collapse-tags="collapseTags"
        :collapse-tags-tooltip="collapseTagsTooltip"
        :separator="separator"
        :filterable="filterable"
        :placeholder="placeholder"
        :size="size"
        @change="handleChange"
        @expand-change="handleExpandChange"
        @blur="handleBlur"
        @focus="handleFocus"
        @visible-change="handleVisibleChange"
        @remove-tag="handleRemoveTag"
      >
        <template v-if="$slots['default']" #default="scope">
          <slot :data="scope" name="default"></slot>
        </template>
      </el-cascader>
      <div v-if="helpText" class="help-text">{{ helpText }}</div>
    </el-form-item>
  </template>
  
  <script setup lang="ts">
  import { computed } from 'vue'
  
  // 定义级联节点类型
  export interface CascaderOption {
    value: string | number
    label: string
    children?: CascaderOption[]
    disabled?: boolean
    leaf?: boolean
    [key: string]: any
  }
  
  // 定义级联配置类型
  export interface CascaderProps {
    expandTrigger?: 'click' | 'hover'
    multiple?: boolean
    checkStrictly?: boolean
    emitPath?: boolean
    lazy?: boolean
    lazyLoad?: (node: any, resolve: any) => void
    value?: string
    label?: string
    children?: string
    disabled?: string
    leaf?: string
  }
  
  // 定义组件属性
  interface Props {
    modelValue: any
    options: CascaderOption[]
    props?: CascaderProps
    prop?: string
    label?: string
    rules?: any[]
    disabled?: boolean
    clearable?: boolean
    showAllLevels?: boolean
    collapseTags?: boolean
    collapseTagsTooltip?: boolean
    separator?: string
    filterable?: boolean
    placeholder?: string
    size?: 'large' | 'default' | 'small'
    helpText?: string
  }
  
  // 设置默认值
  const props = withDefaults(defineProps<Props>(), {
    modelValue: undefined,
    options: () => [],
    props: () => ({}),
    prop: '',
    label: '',
    rules: () => [],
    disabled: false,
    clearable: true,
    showAllLevels: true,
    collapseTags: false,
    collapseTagsTooltip: false,
    separator: ' / ',
    filterable: false,
    placeholder: '请选择',
    size: 'default',
    helpText: ''
  })
  
  // 定义事件
  const emit = defineEmits([
    'update:modelValue',
    'change',
    'expand-change',
    'blur',
    'focus',
    'visible-change',
    'remove-tag'
  ])
  
  // 处理级联配置
  const cascaderProps = computed(() => {
    return {
      expandTrigger: 'click',
      ...props.props
    }
  })
  
  // 内部值双向绑定
  const innerValue = computed({
    get: () => props.modelValue,
    set: (val) => {
      emit('update:modelValue', val)
    }
  })
  
  // 处理值变化事件
  const handleChange = (val: any) => {
    emit('change', val)
  }
  
  // 处理展开变化事件
  const handleExpandChange = (values: any[]) => {
    emit('expand-change', values)
  }
  
  // 处理失焦事件
  const handleBlur = (event: FocusEvent) => {
    emit('blur', event)
  }
  
  // 处理聚焦事件
  const handleFocus = (event: FocusEvent) => {
    emit('focus', event)
  }
  
  // 处理下拉框可见性变化事件
  const handleVisibleChange = (visible: boolean) => {
    emit('visible-change', visible)
  }
  
  // 处理移除标签事件
  const handleRemoveTag = (value: any) => {
    emit('remove-tag', value)
  }
  </script>
  
  <style scoped>
  .help-text {
    font-size: 12px;
    color: #909399;
    margin-top: 4px;
    line-height: 1.4;
  }
  </style>  